<template>
  <div class="goodsindex">
    <!--    <el-table-->
    <!--        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"-->
    <!--        type="index"-->
    <!--        style="width: 100%">-->
    <el-table style="width: 100%;"
              :data="tableData"
    >
      <el-table-column
          type="index">
      </el-table-column>
      <el-table-column
          label="商品图片"
          prop="mImg">
        <template slot-scope="props">
          <el-image
              style="width: 100px; height: 100px"
              :src="props.row.mImg"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="mName">
      </el-table-column>
      <el-table-column
          label="商品类别">
        <template slot-scope="scope">
          <span v-if="scope.row.cId === 0">
             花卉
          </span>
          <span v-if="scope.row.cId  ===1">
             水果
          </span>
        </template>
      </el-table-column>
      <el-table-column
          show-overflow-tooltip
          label="商品描述"
          prop="mDescription">
      </el-table-column>
      <el-table-column
          label="商品销量"
          prop="mSales">
      </el-table-column>
      <el-table-column
          label="商品库存"
          prop="mInstock">
      </el-table-column>
      <el-table-column
          label="商品原价"
          prop="mOriginal">
      </el-table-column>
      <el-table-column
          label="商品促销价"
          prop="mPromotion">
      </el-table-column>
      <el-table-column
          label="商品成本价"
          prop="mCost">
      </el-table-column>
      <el-table-column
          label="商品添加时间"
          prop="mCreate">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              prefix-icon="el-icon-search"
              @blur="blurser"
              v-on:keyup.enter.native="submit"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">上架
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,// 总条目数
      currentPage: 1, //初始页
      pagesize: 5,    //    每页的数据
      naem: '',
      tableData: [{
        mImg: "",
        mName: '',
        cId: '',
        mDescription: '',
        mSales: '',
        mOriginal: '',
        mPromotion: '',
        mCost: '',
        mCreate: ''
      }],
      imgList: [],
      search: ''
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getTableData();
    },
    // 搜索框失去焦点
    blurser: function () {
      if (this.search === null || this.search === '' || this.search.length < 1) {
        this.getTableData();
      }
    },
    // 搜素框回车监听
    submit: function () {
      if (this.search !== null && this.search !== '' && this.search.length > 0) {
        this.$http.get("rjbCommodity/likeAll?status=1&name=" + this.search)
            .then(backtrack => {
              this.tableData = backtrack.data;
              this.total = backtrack.data.length;
            })
            .catch(error => {
              this.success("查询失败");
            });
      }
    },
    handleEdit(index, row) {
      row.mStatus = 2;
      this.$http({
        method: 'post',
        url: 'rjbCommodity/updateOne',
        responseType: 'post',
        data: JSON.stringify(row)
      })
          .then(data => {
            if (data.status === 200) {
              this.success("更改成功");
              this.getTableData();
            }
          })
          .catch(error => {
            console.log("error => ");
            console.log(error);
            this.failure("修改失败");
          });
    },
    handleDelete(index, row) {
      let id = row.mId;
      this.$http("rjbCommodity/deleteOne?id=" + id)
          .then(data => {
            // console.log(data);
            if (data.data) {
              this.success("删除成功");
              this.getTableData();
            } else {
              this.failure("删除失败");
            }
          })
          .catch(error => {
            console.log(error);
            this.failure("删除失败");
          });
    },
    getTableData() {
      // ("rjbCommodity/fruitStatus?status=1&pageNum=" + this.currentPage + "&pagesize=" + this.pagesize + "&name=" + this.name)
      this.$http.get("rjbCommodity/limitList?status=1&pageNum=" + this.currentPage + "&pageSize=" + this.pagesize)
          .then(data => {
            this.total = data.data.total;
            this.tableData = data.data.list;
          });
    },
    failure(msg) {
      this.$notify.error({
        title: '错误',
        message: msg
      });
    },
    success(msg) {
      this.$notify({
        title: '成功',
        message: msg,
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>
